<x-app>
    <form class="p-2 flex gap-2" action="{{ route('search.history') }}" method="post">
        @csrf
        <div class="relative flex-1">
            <label class="absolute inset-y-0 flex items-center pl-3" for="search">
                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
                </svg>
            </label>

            <input type="search" id="search" name="search" class="p-2 pl-8 w-full rounded-full text-sm bg-neutral-100 placeholder-stone-300 items-center focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500" placeholder="请输入关键字">
        </div>

        <button type="button" class="px-2 flex-none items-center text-stone-500 text-sm" onclick="history.back()">
            取消
        </button>
    </form>

    <div class="p-2">
        <div class="flex items-center mb-2">
            <h1 class="text-lg font-bold">历史搜索</h1>

            @if($search_list)
                <a href="{{ route('search.clear') }}" class="ml-auto text-sm flex items-center">
                    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                    </svg>
                    清空
                </a>
            @endif
        </div>

        @if($search_list)
            <div class="grid grid-cols-2 gap-2 text-sm">
                @foreach($search_list as $v)
                    @php($search = $search_list[$loop->remaining])
                    <a href="{{ route('videos.index', compact('search')) }}" class="rounded-full bg-neutral-100 text-center p-2 truncate hover:text-red-600">{{ $search }}</a>
                @endforeach
            </div>
        @else
            <p class="text-sm text-stone-400">没有搜寻纪录</p>
        @endif
    </div>

    <p class="h-2 bg-neutral-100"></p>

    @php($icons = ['from-rose-300 to-rose-500', 'from-amber-300 to-amber-500', 'from-yellow-300 to-yellow-500'])

    <div class="p-2">
        <h1 class="text-lg font-bold mb-2">最新视频</h1>
        <div class="text-sm space-y-3">
            @foreach($news as $index => $v)
                <a href="{{ $v->presenter()->show }}" class="text-center truncate flex gap-2 items-center hover:text-red-600">
                    <span class="text-xs w-5 text-center {{ isset($icons[$index]) ? $icons[$index]. ' h-5 leading-normal bg-gradient-to-bl text-white rounded-full' : 'text-stone-500' }}">{{ $loop->iteration }}</span>
                    {{ $v->title }}
                </a>
            @endforeach
        </div>
    </div>

    <p class="h-2 bg-neutral-100"></p>
    <div class="p-2">
        <h1 class="text-lg font-bold mb-2">热门视频</h1>
        <div class="text-sm space-y-3">
            @foreach($hots as $index => $v)
                <a href="{{ $v->presenter()->show }}" class="text-center truncate flex gap-2 items-center hover:text-red-600">
                    <span class="text-xs w-5 text-center {{ isset($icons[$index]) ? $icons[$index]. ' h-5 leading-normal bg-gradient-to-bl text-white rounded-full' : 'text-stone-500' }}">{{ $loop->iteration }}</span>
                    {{ $v->title }}
                </a>
            @endforeach
        </div>
    </div>
</x-app>
